<template>
  <div>
    <div class="NameAndPhoto">
      <div class="photo">
        <van-image
          round
          width="5rem"
          height="5rem"
          fit="cover"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="name">{{ user.username }}</div>

      <div class="info">
        <van-icon name="envelop-o"/>
        {{ user.email }}
      </div>
      <div class="info">
        <van-icon name="friends-o"/>
        {{ user.comm_name }}
      </div>

      <div class="logout" @click="logout">退出登录</div>
    </div>


  </div>
</template>

<script>
import Banner from "./banner.vue";
import {h} from "vue";
import Home from "../views/Home.vue";
import axios from "axios";
import store from "../store";

export default {
  name: "PersonalInformation",
  components: {Banner},
  data() {
    return {
      user: {
        name: ' ',
        email: ' ',
        classes: ' '
      }

    }
  },
  methods: {
    logout() {
      this.axios({
        method: "get",
        url: "/logout",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // 成功通知
            this.$store.commit("REMOVE_INFO")
            this.$notify({type: 'success', message: '退出成功 😊'});

            // this.$store.commit("SET_TABBAR_ACTIVE",0)

            this.$router.push(Home);

          }
        }
      })
    },

    getUserInfo() {
      this.axios({
        method: "get",
        url: "/getuserinfo",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // 成功通知
            this.name = resp.data.username
            this.email = resp.data.email
          }
        }
      })

    },

    setUserInfo() {
      var userinfo = sessionStorage.getItem('userinfo')
      if (userinfo == null || userinfo === '') {
        console.log('没user')
        axios.get("http://localhost:8080/user/getUserByJWT").then(res => {
          const userinfo = res.data.data //后端返回的登录用户信息（不包含密码）
          store.commit("SET_USERINFO", userinfo)
        })

      }

      if (userinfo) {
        this.user = JSON.parse(userinfo)
      }
    }


  },
  created() {
    this.setUserInfo()
  }
}
</script>

<style scoped>

.NameAndPhoto {
  width: 80%;
  height: 200px;
  padding-top: 20px;
  margin: auto;

}

.photo {
  display: flex;
  justify-content: center;
  align-items: center;

}

.name {
  text-align: center;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #605f5f;
}

.info {
  text-align: center;
  margin-top: 5px;
  font-size: 15px;
  font-weight: 400;
  color: #605f5f;
}

.logout {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: rgba(96, 95, 95, 0.5);
}

</style>
